<template>
   <div class="div">
      <pageHeader title="文章列表"></pageHeader>
      <pageSearch>
         <template #input>
            <el-input v-model="state.input" placeholder="输入查询条件" clearable />
         </template>
         <template #button>
            <el-button type="primary" @click="SearchArticle">查 询</el-button>
         </template>
      </pageSearch>

      <el-table :data="state.ArticleList" stripe style="width: 100%">
         <el-table-column prop="article_id" label="ID" width="80" />
         <el-table-column prop="article_title" label="标题" width="180" />

         <el-table-column prop="article_time" label="时间" />
         <el-table-column prop="article_view" label="浏览数量" />
         <el-table-column label="操作">
            <template #default="{ $index, row }">
               <el-button size="small" @click="updateArticle(row)">修 改</el-button>
               <el-button size="small" type="danger" @click="deleteArticle(row)">删 除</el-button>
            </template>
         </el-table-column>
      </el-table>

      <el-pagination :page-size="3" :pager-count="2" layout="prev, pager, next" :total="state.ArticleList.length" />

   </div>
</template>

<script setup  lang="ts">
import { onMounted, reactive, toRefs, ref } from "vue";
import http, { format, setItem, getItem } from "@/utils";
import { useRouterAction } from "@/utils/router";
import { useUserStore } from "@/state/user";
import { showSuccessToast, showFailToast } from 'vant';
const { back, push } = useRouterAction()
import { ArticleType } from "@/types/response/home";


const state: {
   input: string,
   ArticleList: ArticleType<string, string>[]
} = reactive({
   input: "",
   ArticleList: []
})

onMounted(() => {
   SearchArticle()
})

const SearchArticle = async () => {
   state.ArticleList = await http.articleList({
      text: state.input
   })
   console.log("ArticleList: ", state.ArticleList);
}

const updateArticle = (row: ArticleType<string, string>) => {
   console.log(row);
}
const deleteArticle = (row: ArticleType<string, string>) => {
   console.log(row);
}

</script>

<style lang="less" scoped></style>

